<!DOCTYPE html>
<html lang="en">
    <title>按钮</title>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>

		<!-- 引入样式文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css"> -->
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script> -->
		<link rel="stylesheet" href="../css/index.css">
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vant.min.js"></script>

	</head>

	<body>
		<div id="app">
			<div style="background-color: #DCDDE0;">
				<div style="color: #C8C9CC;30px;line-height: 30px;">基础用法</div>
				<van-tabbar >
				  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
				  <van-tabbar-item icon="search">标签</van-tabbar-item>
				  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
				  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
				</van-tabbar>
				
				
				<!-- <div style="color: #C8C9CC;height: 30px;line-height: 30px;">通过名称匹配</div>
				<van-tabbar >
				  <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
				  <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
				  <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
				  <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
				</van-tabbar>
				
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">徽标提示</div>
				<van-tabbar >
				  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
				  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
				  <van-tabbar-item icon="friends-o" badge="5">标签</van-tabbar-item>
				  <van-tabbar-item icon="setting-o" badge="20">标签</van-tabbar-item>
				</van-tabbar>
				
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">自定义图标</div>
				<van-tabbar>
				  <van-tabbar-item badge="3">
				    <span>自定义</span>
				    <template #icon="props">
				      <img :src="props.active ? icon.active : icon.inactive" />
				    </template>
				  </van-tabbar-item>
				  <van-tabbar-item icon="search">标签</van-tabbar-item>
				  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
				</van-tabbar>
				
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">自定义颜色</div>
				<van-tabbar>
				  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
				  <van-tabbar-item icon="search">标签</van-tabbar-item>
				  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
				  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
				</van-tabbar>
				
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">监听切换事件</div>
				<van-tabbar >
				  <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
				  <van-tabbar-item icon="search">标签2</van-tabbar-item>
				  <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
				  <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
				</van-tabbar>
				
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">路由模式</div>
				<!-- <router-view ></router-view> -->
				
				<!-- <van-tabbar route>
				  <van-tabbar-item replace to="/home" icon="home-o">
				    标签
				  </van-tabbar-item>
				  <van-tabbar-item replace to="/search" icon="search">
				    标签
				  </van-tabbar-item>
				</van-tabbar> -->
				
			</div>
		</div>
		<script>
			//import { Notify } from 'vant';
			// 在 #app 标签下渲染一个按钮组件
			new Vue({
				el: '#app',
				
				data: {
				
				},
				// data() {
				//     return {
				//       active: 0,
				//     };
				//   },
				
				methods: {
					// onChange(index) {
					//       //Notify({ type: 'primary', message: index });
					//     }
				},
				
				created() {
				
				},
				//template: '<van-button type="danger">默认按钮</van-button>'
				//template: `<van-cell title="单元格" value="内容" size="large" />`
			});
			// 调用函数组件，弹出一个 Toast
			//vant.Toast('提示');
		</script>
	</body>

</html>
